<!--
 * @Author: taoke
 * @Date: 2022-05-05 09:45:04
 * @LastEditors: taoke
 * @LastEditTime: 2022-05-11 16:58:39
 * @Description: 
 * @FilePath: \yunying-sys-cli4\src\components\partner\relation\components\relationTree.vue
-->
<template>
  <div>
    <el-tree
      class="tree-line"
      icon-class="el-icon-circle-plus-outline"
      lazy
      node-key="id"
      :indent="0"
      :expand-on-click-node="false"
      :data="data"
      :props="defaultProps"
      :load="load"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <el-link
            target="_blank"
            class="node-link"
            @click="labelClick(data)"
            >{{ node.label }}</el-link
          >
          <span class="label-suffix">{{ data.statusLabel }}</span>
        </span>
      </span>
    </el-tree>
    <detail-dialog ref="detailDialog"></detail-dialog>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { formatterValueByDict } from '@utils/table'
import detailDialog from './detailDialog'
export default {
  name: 'relationTree',
  props: {
    msg: String
  },
  components: {
    detailDialog
  },
  data() {
    return {
      data: [],
      statusOptions: [],
      defaultProps: {
        children: 'childList',
        label: 'dpAccount',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    async getDict() {
      // 获取发放状态
      this.statusOptions = await sysNormalDisable('partner_award_status')
    },
    getStatusLabel(data) {
      return formatterValueByDict({
        cellValue: data.status,
        options: this.statusOptions
      })
    },
    async loadData(data) {
      this.data = data
      await this.getDict()
      this.data.forEach((element) => {
        this.$set(element, 'statusLabel', this.getStatusLabel(element))
      })
    },
    load(node, resolve) {
      if (node.data.childList) {
        const childList = node.data.childList
        childList.forEach((element) => {
          element.statusLabel = this.getStatusLabel(element)
          // 第三级element.childList为null
          if (
            element.childList === null ||
            (element.childList && element.childList.length === 0)
          ) {
            element.leaf = true
          }
        })
        resolve(childList)
      } else {
        resolve([])
      }
    },
    labelClick(data) {
      this.$refs.detailDialog.show(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.node-link {
  :deep(span) {
    color: #1dc8a4;
  }
}
.is-underline:hover:after {
  border-color: #1dc8a4;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.label-suffix {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  outline: 0;
  padding: 0;
  padding-left: 2%;
}
:deep(.tree-line) {
  .el-tree-node {
    position: relative;
    padding-left: 50px; // 缩进量
  }
  // .el-tree-node{
  //   padding-left: 0;
  // }
  .el-tree-node__children {
    padding-left: 50px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px solid #52627c;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: '';
    width: 50px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px solid #52627c;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>
